<template>
    <el-row>
        <el-col :span="24">
            <el-card shadow="never">
                <template #header>
                    <div>
                        <el-row>
                            <el-col :span="12"><h3>收藏管理列表</h3></el-col>
                            <el-col :span="12" style="text-align: right">
                                <el-button size="small" type="success" icon="el-icon-plus"
                                           @click="addFavorite">添加资源
                                </el-button>
                            </el-col>
                        </el-row>
                    </div>
                </template>
                <div>
                    <el-table :data="favoriteTableData"
                              :cell-style="{height: '20px', padding: '5px 0'}"
                              style="width: 100%">
                        <el-table-column type="expand">
                            <template #default="props">
                                <el-form class="favor-expand-row" label-position="right" label-width="90px">
                                    <el-form-item label="资源名称">
                                        <span>{{ props.row.name }}</span>
                                    </el-form-item>
                                    <el-form-item label="资源URL">
                                        <span>{{ props.row.url }}</span>
                                    </el-form-item>
                                    <el-form-item label="所属类别">
                                        <el-tag size="medium" type="warning">
                                            {{ props.row.catalogName }}
                                        </el-tag>
                                    </el-form-item>
                                    <el-form-item label="描述">
                                        <p style="word-break: break-word; line-height: 25px; padding: 8px 0 17px 0;">
                                            {{ props.row.description }}
                                        </p>
                                    </el-form-item>
                                </el-form>
                            </template>
                        </el-table-column>
                        <el-table-column type="index" width="50"/>
                        <el-table-column prop="name" label="资源名称"/>
                        <el-table-column prop="url" label="资源网址"/>
                        <el-table-column label="所属类别" width="150">
                            <template #default="scope">
                                <el-tag size="medium" type="warning">{{ scope.row.catalogName }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="160">
                            <template #default="scope">
                                <el-button @click="modifyFavorite(scope.row)"
                                           type="primary"
                                           size="mini">修改
                                </el-button>
                                <el-button @click.prevent="delFavorite(scope.$index, favoriteTableData, scope.row.id)"
                                           type="danger"
                                           size="mini">删除
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        style="text-align: right;padding: 10px 0 30px 0;"
                        background
                        layout="total, sizes, prev, pager, next"
                        :page-sizes="[10, 15, 20, 30, 50]"
                        v-model:currentPage="favoritePage.curPageNo"
                        v-model:page-size="favoritePage.pageSize"
                        :total="favoritePage.total"
                        @size-change="handleSizeChange"
                        @current-change="handlePageChange">
                    </el-pagination>
                </div>
            </el-card>
        </el-col>
        <favorite-form v-model:show="favForm.show" :opt="favForm.event" :datas="favForm.data"
                       @finishMethod="getPageData"/>
    </el-row>
</template>

<script>
import FavoriteForm from "@/views/app/favorite/FavoriteForm.vue";
import favoriteReq from "@/services/favorite/request";

export default {
    name: "Favorite",
    components: {FavoriteForm},
    methods: {
        addFavorite() {
            this.favForm.data = {}
            this.favForm.event = "ADD"
            this.favForm.show = true
        },
        modifyFavorite(row) {
            // 浅拷贝：如果修改了数据，但是没有提交，页面就不能与后台同步
            // this.favForm.data = row
            // 深拷贝
            this.favForm.data = JSON.parse(JSON.stringify(row))
            this.favForm.event = "EDIT"
            this.favForm.show = true
        },
        delFavorite(index, rows, id) {
            this.$confirm("此操作将永久删除，且不可逆, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let r = await favoriteReq.delete({}, [id])
                if (r.code === 0) {
                    this.$message.success("操作成功");
                    rows.splice(index, 1);
                } else {
                    this.$message.error(r.msg);
                }
            }).catch(err => {
            });
        },
        handleSizeChange(sz) {
            this.getPageData(this.favoritePage.curPageNo, sz);
        },
        handlePageChange(v) {
            this.getPageData(v, this.favoritePage.pageSize);
        },
        initFavoritePage() {
            this.favoritePage.curPageNo = 1
            this.favoritePage.pageSize = 10
            this.favoritePage.total = 0
        },
        async getPageData(pageNo, pageSize) {
            pageNo = pageNo ? pageNo : this.favoritePage.curPageNo
            pageSize = pageSize ? pageSize : this.favoritePage.pageSize
            let res = await favoriteReq.listPage({page: pageNo, limit: pageSize})
            if (res.code === 0) {
                this.favoriteTableData = res.data
                this.favoritePage.total = res.count
            } else {
                this.initFavoritePage()
                this.$message.error(res.msg)
            }
        },
    },
    mounted() {
        // 加载列表
        this.getPageData(this.favoritePage.curPageNo, this.favoritePage.pageSize)
    },
    data() {
        return {
            favoriteTableData: [],
            favoritePage: {
                curPageNo: 1,
                pageSize: 10,
                total: 0,
            },
            favForm: {
                show: false,
                event: "",
                data: null,
            },
        };
    },
};
</script>

<style lang="scss">
.favor-expand-row {
    background-color: #F0F0F0;

    .el-form-item {
        margin-right: 0;
        margin-bottom: 0;
        width: 80%;
    }

    .el-form-item__label {
        color: #99A9BF !important;
        font-weight: bold !important;
    }
}
</style>